<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UFT-8">
<title>人工智能</title>
<link href="css/style_chat.css" rel="stylesheet">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="full-screen" content="yes">
    <meta content="default" name="apple-mobile-web-app-status-bar-style">
    <meta name="screen-orientation" content="portrait">
    <meta name="browsermode" content="application">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="x5-orientation" content="portrait">
    <meta name="x5-fullscreen" content="true">
    <meta name="x5-page-mode" content="app">
    <base target="_blank">
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="css/style_chat.css">
    <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="vendors/linericon/style.css">
        <link rel="stylesheet" href="css/font-awesome.min.css">
        <link rel="stylesheet" href="vendors/owl-carousel/owl.carousel.min.css">
        <link rel="stylesheet" href="vendors/lightbox/simpleLightbox.css">
        <link rel="stylesheet" href="vendors/nice-select/css/nice-select.css">
        <link rel="stylesheet" href="vendors/animate-css/animate.css">
        <!-- main css -->
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/responsive.css">
    <script src="js/jquery-3.2.1.min.js"></script>
</head>
<body lang="zh">
    <img style="width:100%;height:100%" src="img/back.jpg">
    <div id="chat">
    <header class="header_area">
            <div class="main_menu">
            	<nav class="navbar navbar-expand-lg navbar-light">
					<div class="container box_1620">
						<!-- Brand and toggle get grouped for better mobile display -->
						<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
						<!-- Collect the nav links, forms, and other content for toggling -->
						<div class="collapse navbar-collapse offset" id="navbarSupportedContent">
							<input v-model="search" style="width:250px;background:transparent;border:none #FFFFFF;border-bottom:#777777 solid 1px;color:white;" placeholder="请输入查询电影">
							<a :href="'list.jsp?email='+user.email+'&nackname='+user.nickname+'&m_name='+search" class="search"><i class="lnr lnr-magnifier"></i></a>
							<ul class="nav navbar-nav menu_nav ml-auto">
								<li class="nav-item active"><a class="nav-link" href="index.jsp">首页</a></li> 
								<li class="nav-item"><a href="javascript:void(0);" class="nav-link" v-on:click="guess">猜你喜欢</a></li> 
								<li class="nav-item submenu dropdown">
									<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">榜单</a>
									<ul class="dropdown-menu">
										<li class="nav-item"><a class="nav-link" :href="'list.jsp?email='+user.email+'&nickname='+user.nickname+'&sortType=rateFirst'">高分榜单</a>
										<li class="nav-item"><a class="nav-link" :href="'list.jsp?email='+user.email+'&nickname='+user.nickname+'&sortType=mostSee'">最热榜单</a> 
									</ul>
								</li> 
								<li class="nav-item"><a class="nav-link" :href="'chat.jsp?email='+user.email+'&nickname='+user.nickname">人工智能</a></li>
							</ul>
							
							<ul class="nav navbar-nav navbar-right">
								<li class="nav-item">
								<button v-if="user.email!=''" class="tickets_btn" style="border:0px;">{{user.nickname}}</button>
								<button v-else @click="sign" class="tickets_btn" style="border:0px;">登录</button>
								</li>
							</ul>
						</div> 
					</div>
            	</nav>
            </div>
        </header>
    <div class="abs cover contaniner" style="margin-top:50px">
        <div class="abs cover pnl" id="all">
            <div class="top pnl-head" style="width:620px;  background: -webkit-linear-gradient(#312bb4, #cbb5ef);
    background: -o-linear-gradient(#312bb4,#cbb5ef);
    background: -moz-linear-gradient(#312bb4, #cbb5ef); 
    background: linear-gradient(#312bb4,#cbb5ef); "></div>
            <div class="abs cover pnl-body" id="pnlBody">
                <div class="abs cover pnl-left">
                    <div class="abs cover pnl-msgs scroll" id="show">
                        <div class="pnl-list" id="msgs">
                            <div class="msg robot">
                                <div class="msg-left" worker="××">
                                    <div class="msg-host photo" style="background-image: url(img/favicon.png)"></div>
                                    <div class="msg-ball">你好，我是机器人××               <br><br>您是想要了解哪些方面呢？</div>
                                </div>
                            </div>
                            <div class="msg guest">
                                <div class="msg-right">
                                    <div class="msg-host headDefault"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="abs bottom pnl-text">
                        <div class="abs top pnl-warn" id="pnlWarn">
                            <div class="fl btns rel pnl-warn-free">
                                
                            </div>
                        </div>
                        <div class="abs cover pnl-input">
                            <textarea v-model="question" class="scroll" id="text" wrap="hard" placeholder="请输入问题……"></textarea>
                            <div class="abs atcom-pnl scroll hide" id="atcomPnl">
                                <ul class="atcom" id="atcom"></ul>
                            </div>
                        </div>
                        <button @click="SendMsg" class="abs br pnl-btn" id="submit" style="background-color: rgba(72, 64, 189, 0.5);height:40px;width:80px;font-size:20px;font-weight:normal" >发送</button>
                    </div>
                    
                </div>
                
            </div>
        </div>
    </div>
    </div>
    <%
        String nickname="\""+request.getParameter("nickname")+"\"";
        String email="\""+request.getParameter("email")+"\"";
        %>
       
<script src="js/jquery-3.2.1.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script>
    
    var vue=new Vue({
    	el:'#chat',
    	data:{
    		user:{
				nickname:null,
				email:null
			},
   			question:"",
   			search:""
    	},
    	created:function(){
    		this.user.email=<%=email%>;
			this.user.nickname=<%=nickname%>;
			
    	},
    	methods:{
    		SendMsg:function(){
    			if (this.question == "" || this.question == null)
    	        {
    	            alert("发送信息为空，请输入！")
    	        }
    	        else
    	        {
    	        	var message=this.question;
    	        	AddMsg('default', SendMsgDispose(this.question));
    	        	this.question="";
    	        	$.ajax({
    	        		url:"http://27x31799n7.zicp.vip/chatbot?",
    	        		type:"GET",
    	        		data:{
    	        			question:message
    	        		},
    	        		dataType:"json",
    	        		
    	        		success:function(data){
    	        			console.log(data);
    	        			AddMsg('worker',SendMsgDispose(data.answer));
    	        		}
    	        		
    	        	})
    	        }
    		},
    		guess:function(){
				if(user.hasEnter){
					window.location.href='mark.html?userId='+this.user.userId+'&userName='+this.user.userName+'&hasEnter='+this.user.hasEnter;
				}else{
					window.location.href='mark.html?userId='+this.user.userId+'&userName='+this.user.userName+'&hasEnter='+this.user.hasEnter;
				}
			}
    	}
    })
    
 // 发送信息
    
    // 发送的信息处理
    function SendMsgDispose(detail)
    {
        detail = detail.replace("\n", "<br>").replace(" ", "&nbsp;")
        return detail;
    }

    // 增加信息
    function AddMsg(user,content)
    {
        var str = CreadMsg(user, content);
        var msgs = document.getElementById("msgs");
        msgs.innerHTML = msgs.innerHTML + str;
    }

    // 生成内容
    function CreadMsg(user, content)
    {
        var str = "";
        if(user == 'default')
        {
            str = "<div class=\"msg guest\"><div class=\"msg-right\"><div class=\"msg-host headDefault\"></div><div class=\"msg-ball\">" + content +"</div></div></div>"
        }
        else
        {
            str = "<div class=\"msg robot\"><div class=\"msg-left\" worker=\"" + user + "\"><div class=\"msg-host photo\" style=\"background-image: url(img/favicon.png)\"></div><div class=\"msg-ball\">" + content + "</div></div></div>";
        }
        return str;
    }

    </script>
</body>
</html>